<!-- 表单示例 -->
<template>
  <BaseForm class="f-2" v-model="modelData" :fields="fields" grid="12" label-suffix="：" :size="size">
    <template #zdy>这是自定义的表单字段</template>
  </BaseForm>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, computed } from "vue";

const props = withDefaults(
  defineProps<{
    _exampleProp?: CommonObj;
  }>(),
  {
    _exampleProp: () => ({}),
  }
);

const modelData = reactive({ id: 0, nc: "这是用户昵称", zy: 0, xm: "" });
const fields = [
  { prop: "id", label: "用户ID", required: true, quickAttrs: {} },
  { prop: "nc", label: "昵称", quickAttrs: {} },
  {
    prop: "zy",
    label: "职业",
    type: "select",
    attrs: {
      options: [
        { label: "职业0", value: 0 },
        { label: "职业1", value: 1 },
      ],
    },
  },
  { prop: "xm", label: "姓名", quickAttrs: {} },
  { prop: "xb", label: "性别", quickAttrs: {} },
  { prop: "nl", label: "年龄", quickAttrs: {} },
  { prop: "xx", label: "学校", quickAttrs: { grid: 6 } },
  { prop: "jg", label: "籍贯", quickAttrs: { grid: 6 } },
  { prop: "xjd", label: "现居地", quickAttrs: { grid: 6 } },
  { prop: "ip", label: "IP地址", quickAttrs: { grid: 6 } },
  { prop: "dh", label: "电话", quickAttrs: { grid: 6 } },
  { prop: "zdy", label: "自定义", type: "slot" },
];
</script>
<style lang="scss" scoped></style>
